import { defineStore } from 'pinia'
import { ref, watch } from 'vue'

//初始化数据
function initData() {
  return {
    isCollapse: false,
    tags: [
      {
        path: '/home',
        name: 'home',
        label: '首页',
        icon: 'hone',
      },
    ],
    currentMenu: null,
    /* 展示菜单列表的数组 */
    menuList: [],
    token: null,
    routerList: [],
  }
}

//这里的第一个参数是 Store 的全局唯一ID
//我们这种定义模式就是storeSetup，该函数定义了一些响应式属性和方法，并且返回一个带有我们想暴露出去的属性和方法的对象。
//其中ref是state的属性，computed()是getter（也就是计算属性），function()是actions，属性和getter是不能分解的，actions是可以单独的
// Action 相当于组件中的 method。
export const useAllDataStore = defineStore('allData', () => {
  //现在这个就是state的属性，名字是state
  const state = ref(initData())

  // 进行数据持久化
  // 监听 state 变化，当 token 存在时，将数据保存到 localStorage
  // deep: true的作用就是深度监听，可以监听到嵌套对象的变化
  watch(
    state, //对于这个响应式状态进行监控
    (newObj) => {
      if (!newObj.token) return
      localStorage.setItem('store', JSON.stringify(newObj))
    },
    {
      deep: true,
    },
  )

  //
  function selectMenu(val) {
    if (val.name === 'home') {
      state.value.currentMenu = null
    } else {
      state.value.currentMenu = val
      //下面两个方法是做什么的
      let index = state.value.tags.findIndex((item) => item.name === val.name)
      index === -1 ? state.value.tags.push(val) : ''
    }
  }

  //删除要删除的标签
  function deleteMenu(tag) {
    let index = state.value.tags.findIndex((item) => item.name === tag.name)
    // 将当前tags切除
    state.value.tags.splice(index, 1)
  }

  //更新菜单列表
  function updateMenuList(val) {
    // 将当前tags切除
    state.value.menuList = val
  }

  //
  function clean() {
    // 将所有路由移除
    state.value.routerList.forEach((item) => {
      if (item) item()
      state.value = initData()
      // 删除本地的缓存
      localStorage.removeItem('store')
    })
  }

  function addRoutes(router, type) {
    // 刷新页面时候
    if (type === 'refresh') {
      if (JSON.parse(localStorage.getItem('store'))) {
        state.value = JSON.parse(localStorage.getItem('store'))
        //
        state.value.routerList = []
      } else {
        return
      }
    }
    // 将当前tags切除
    const menu = state.value.menuList

    //获取所有的视图组件
    const module = import.meta.glob('../views/*.vue')
    // console.log('module', module)
    const routeArr = []
    // 处理菜单数据，生成路由信息
    //分有子路由和无子路由
    menu.forEach((item) => {
      if (item.children) {
        item.children.forEach((child) => {
          let url = `../views/${child.url}.vue`
          // console.log('url', url)
          child.component = module[url]
          // console.log('child.component', child.component)
          routeArr.push(...item.children)
        })
      } else {
        let url = `../views/${item.url}.vue`
        // console.log('url', url)
        item.component = module[url]
        // console.log('item.component', item.component)
        routeArr.push(item)
      }
      //添加路由
      routeArr.forEach((item) => {
        state.value.routerList.push(router.addRoute('main', item))
      })
    })
  }
  return {
    /* 其实是直接返回的是state.value */
    state,
    selectMenu,
    deleteMenu,
    updateMenuList,
    addRoutes,
    clean,
  }
})
